<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册 - 移动专项测试平台</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background-color: #f0f2f5;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
        }
        .register-container {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            width: 400px;
            padding: 40px;
            margin: 20px;
        }
        .register-title {
            text-align: center;
            font-size: 24px;
            font-weight: bold;
            color: #303133;
            margin-bottom: 30px;
        }
        .register-form {
            width: 100%;
        }
        .form-item {
            margin-bottom: 20px;
        }
        .form-button {
            width: 100%;
        }
        .login-link {
            text-align: center;
            margin-top: 20px;
            font-size: 14px;
            color: #606266;
        }
        .login-link a {
            color: #409EFF;
            text-decoration: none;
        }
        .code-input {
            display: flex;
            gap: 10px;
        }
        .code-input .el-input {
            flex: 1;
        }
        .code-input .el-button {
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <div class="register-container">
        <div class="register-title">移动专项测试平台</div>
        
        <div id="app">
            <el-form ref="registerForm" :model="registerForm" :rules="registerRules" class="register-form">
                <el-form-item label="手机号" prop="phone" class="form-item">
                    <el-input v-model="registerForm.phone" placeholder="请输入手机号" prefix-icon="el-icon-mobile-phone"></el-input>
                </el-form-item>
                <el-form-item label="验证码" prop="verificationCode" class="form-item">
                    <div class="code-input">
                        <el-input v-model="registerForm.verificationCode" placeholder="请输入验证码" prefix-icon="el-icon-key"></el-input>
                        <el-button type="primary" :disabled="countdown > 0" @click="sendVerificationCode">
                            {{ countdown > 0 ? countdown + '秒后重新发送' : '发送验证码' }}
                        </el-button>
                    </div>
                </el-form-item>
                <el-form-item label="密码" prop="password" class="form-item">
                    <el-input type="password" v-model="registerForm.password" placeholder="请设置密码（6-20位）" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item label="确认密码" prop="confirmPassword" class="form-item">
                    <el-input type="password" v-model="registerForm.confirmPassword" placeholder="请再次输入密码" prefix-icon="el-icon-lock"></el-input>
                </el-form-item>
                <el-form-item class="form-item">
                    <el-button type="primary" @click="handleRegister" :loading="registerLoading" class="form-button">注册</el-button>
                </el-form-item>
            </el-form>
            <div class="login-link">
                已有账号？<a href="javascript:void(0)" @click="switchToLogin">立即登录</a>
            </div>
        </div>
    </div>

    <!-- 引入Vue 2.x和Element UI -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.14/lib/index.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios@1.6.8/dist/axios.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    registerForm: {
                        phone: '',
                        verificationCode: '',
                        password: '',
                        confirmPassword: ''
                    },
                    registerRules: {
                        phone: [
                            { required: true, message: '请输入手机号', trigger: 'blur' },
                            { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
                        ],
                        verificationCode: [
                            { required: true, message: '请输入验证码', trigger: 'blur' },
                            { min: 4, max: 6, message: '验证码长度应为4-6位', trigger: 'blur' }
                        ],
                        password: [
                            { required: true, message: '请设置密码', trigger: 'blur' },
                            { min: 6, max: 20, message: '密码长度应为6-20位', trigger: 'blur' }
                        ],
                        confirmPassword: [
                            { required: true, message: '请确认密码', trigger: 'blur' },
                            {
                                validator: (rule, value, callback) => {
                                    if (value !== this.registerForm.password) {
                                        callback(new Error('两次输入的密码不一致'));
                                    } else {
                                        callback();
                                    }
                                },
                                trigger: 'blur'
                            }
                        ]
                    },
                    registerLoading: false,
                    countdown: 0,
                    timer: null
                };
            },
            methods: {
                handleRegister() {
                    this.$refs.registerForm.validate((valid) => {
                        if (valid) {
                            this.registerLoading = true;
                            axios.post('/api/register', this.registerForm)
                                .then(response => {
                                    this.registerLoading = false;
                                    if (response.data.success) {
                                        this.$message.success('注册成功，请登录');
                                        setTimeout(() => {
                                            window.location.href = '/login';
                                        }, 1500);
                                    } else {
                                        this.$message.error(response.data.message);
                                    }
                                })
                                .catch(error => {
                                    this.registerLoading = false;
                                    this.$message.error('注册失败，请稍后重试');
                                    console.error(error);
                                });
                        }
                    });
                },
                sendVerificationCode() {
                    // 验证手机号
                    const phoneRule = this.registerRules.phone[1];
                    if (!phoneRule.pattern.test(this.registerForm.phone)) {
                        this.$message.error('请输入正确的手机号格式');
                        return;
                    }
                    
                    // 发送验证码
                    axios.post('/api/send_verification_code', { phone: this.registerForm.phone })
                        .then(response => {
                            if (response.data.success) {
                                this.$message.success('验证码已发送');
                                this.startCountdown();
                            } else {
                                this.$message.error(response.data.message || '发送验证码失败');
                            }
                        })
                        .catch(error => {
                            this.$message.error('发送验证码失败，请稍后重试');
                            console.error(error);
                        });
                },
                startCountdown() {
                    this.countdown = 60;
                    this.timer = setInterval(() => {
                        this.countdown--;
                        if (this.countdown <= 0) {
                            clearInterval(this.timer);
                        }
                    }, 1000);
                },
                switchToLogin() {
                    window.location.href = '/login';
                }
            },
            beforeDestroy() {
                if (this.timer) {
                    clearInterval(this.timer);
                }
            }
        });
    </script>
</body>
</html>